<html>
<head>
  <script type="text/javascript" src="js/jWebSocket.js"><!--//--></script>
  <script type="text/javascript" src="js/jquery-1.4.2.min.js"><!--//--></script>
  <script type="text/javascript" src="js/bristle.js"><!--//--></script>
  <!--  <script type="text/javascript" src="js/EventHandler.js">&lt;!&ndash;//&ndash;&gt;</script>
  <script type="text/javascript" src="js/bristle-commons.js">&lt;!&ndash;//&ndash;&gt;</script>
  <script type="text/javascript" src="js/Actions.js">&lt;!&ndash;//&ndash;&gt;</script>
  <script type="text/javascript" src="js/bristlePlugin.js">&lt;!&ndash;//&ndash;&gt;</script>-->
  <link rel="stylesheet" type="text/css" href="css/style.css"/>
  <script type="text/javascript">
    var connector = new Bristle.BaseConnector();

    $(document).ready(function() {
      connect();
    });

    function connect() {
      var config = {
        serverUrl : "ws://localhost:9787",
        OnOpen : function(aEvent) {
          showConnectedView();
        },
        OnClose : function(aEvent) {
          showDisconnectedView();
        }
      };
      connector.openConnection(config);
    }

    function showRegistrationSuccessView(response) {
      var content = "Your account information: <br> " +
        "Sex: " + Bristle.escapeHTML(response.sex) + "<br>" +
        "First name: " + Bristle.escapeHTML(response.firstName) + "<br>" +
        "Surname: " + Bristle.escapeHTML(response.surname) + "<br>" +
        "Age: " + response.age + "<br>" +
        "Account balance: " + response.accountBalance + "<br>" +
        "Vehicles: ";
      if (response.vehicles !== undefined) {
        for (var vehicleIndex in response.vehicles) {
          content = content + response.vehicles[vehicleIndex] + " ";
        }
      }

      content = content + "<br>Favourite bands:";

      for (var index in response.favouriteBands) {
        var band = response.favouriteBands[index];
        if (band.name !== undefined) {
          content = content + "<br>" + Bristle.escapeHTML(band.name) + " (" + Bristle.escapeHTML(band.genre) + ")";
        }

      }
      content = content + " <br><br> <a href='#' onclick='backToRegistration()'>Back to first page.</a>";

      $('#registrationDiv').hide();
      $('#registrationSuccessContentDiv').html(content);
      $('#registrationSuccessDiv').show();
    }

    function backToRegistration() {
      $('div[id$="-error-div"]').html("");
      $('input').css("border-color", '');
      $('#registrationSuccessDiv').hide();
      $('#registrationSuccessContentDiv').html("");
      $('#registrationDiv').show();
    }

    function getValidationErrorDescription(error) {
      if (error.type == 'NOT_NULL_VIOLATION') {
        return "Field '" + error.field + "' cannot be null.";
      } else if (error.type == 'TYPE_MISMATCH') {
        return "Type mismatch in field '" + error.field + "'.";
      } else {
        return "Unknown validation error in field '" + error.field + "'.";
      }
    }

    function showConnectedView() {
      $('#connectingDiv').hide();
      $('#registrationDiv').show();
    }

    function showDisconnectedView() {
      $('#connectingDiv').hide();
      $('#registrationDiv').hide();
      $('#registrationSuccessDiv').hide();
      $('#disconnectedDiv').show();
    }

    var callback = {
      onSuccess: function(response) {
        showRegistrationSuccessView(response);
      },
      onFailure: function(exception) {
        if (exception.isValidationException()) {
          var errors = exception.errors;
          for (var i in errors) {
            var error = errors[i];
            $("#" + error.field + "-error-div")
              .html("<span class='validationError'>" + getValidationErrorDescription(error) + "</span>");
            $("#" + error.field).css("border-color", "red");
          }
        }
      }
    };

    connector.actions.register = connector.actions.define("registerAction")
      .withCallback(callback)
      .addParam("registerForm")
      .create();

    function register() {
      var registerForm = Bristle.formToObject('#registerForm');
      $('div[id$="-error-div"]').html("");
      $('input').css("border-color", '');
      connector.actions.register(registerForm);
    }
  </script>
</head>

<body style="font-family:verdana, sans-serif;">
<div>

  <div class="contentWrapper">
    <h3>Bristleback Binding Sample</h3>

    <form name="registerForm" id="registerForm" action="index.htm">
      <div id="registrationDiv" class="registrationDiv">

        <fieldset>
          <legend>User Details</legend>
          <ol>
            <li>
              <div id="sex-error-div"></div>
              <label>Sex<em>*</em></label>
              <input type="radio" name="sex" id="sexMale" value="male"/> <label for="sexMale">Male</label>
              <input type="radio" name="sex" id="sexFemale" value="female"/> <label for="sexFemale">Female</label>
            </li>
            <li>
              <div id="firstName-error-div"></div>
              <label for="firstName">First name<em>*</em></label>
              <input id="firstName" name="firstName"/>
            </li>
            <li>
              <div id="surname-error-div"></div>
              <label for="surname">Surname<em>*</em></label>
              <input id="surname" name="surname"/>
            </li>
            <li>
              <div id="age-error-div"></div>
              <label for="age">Age</label>
              <input id="age" name="age"/>
            </li>
            <li>
              <div id="accountBalance-error-div"></div>
              <label for="accountBalance">Account balance</label>
              <input id="accountBalance" name="accountBalance"/>
            </li>
            <li>
              <div>
                <div id="vehicle-error-div"></div>
                <label>Vehicles</label>

                <div style="float: right;">
                  <input type="checkbox" name="vehicles" id="bikeVehicle" value="Bike"/> <label
                  for="bikeVehicle">bike</label>
                  <input type="checkbox" name="vehicles" id="carVehicle" value="Car"/> <label
                  for="carVehicle">car</label>
                  <input type="checkbox" name="vehicles" id="motorbikeVehicle" value="motorbike"/> <label
                  for="motorbikeVehicle">motorbike</label>
                </div>
              </div>
            </li>

          </ol>
        </fieldset>

        <fieldset>
          <legend>Favourite music bands</legend>
          <table class="table">
            <tr>
              <th>Band name</th>
              <th>Genre</th>
            </tr>

            <tr>
              <td>
                <input type="text" name="favouriteBands[0].name" class="bandNameInput">
              </td>
              <td>
                <input type="text" name="favouriteBands[0].genre" class="bandGenreInput">
              </td>
            </tr>

            <tr>
              <td>
                <input type="text" name="favouriteBands[1].name" class="bandNameInput">
              </td>
              <td>
                <input type="text" name="favouriteBands[1].genre" class="bandGenreInput">
              </td>
            </tr>

            <tr>
              <td>
                <input type="text" name="favouriteBands[2].name" class="bandNameInput">
              </td>
              <td>
                <input type="text" name="favouriteBands[2].genre" class="bandGenreInput">
              </td>
            </tr>
          </table>
        </fieldset>

        <fieldset>
          <legend>Submit</legend>
          <input type="button" class="fancyButton" name="submitForm" value="register" onclick="register();">
        </fieldset>
      </div>

      <div id="descriptionDiv" class="descriptionDiv">
        <h4 style="font-family:verdana, sans-serif; text-align:center;">Binding Sample description</h4>

        <ol class="descriptionDivTableOfContent">
          <li class="descriptionDivTableOfContentElement">
            <span>Summary</span>

            <p>This sample application demonstrates the process of binding data into plain java objects.</p>
          <li class="descriptionDivTableOfContentElement">
            <span>How it works</span>

            <ol class="howItWorksDescription">
              <li>Data typed by user is processed into a java script object using Bristleback util function
                <code>Bristle.formToObject('#registerForm')</code>. Nested properties (like object1.nested2.field3) are
                supported, as well as multiple values (for example checkboxes with the same name). Then action <code>registerForm</code>
                is called.
                <p><a href="http://code.google.com/p/bristleback/wiki/Binding">More about binding - client side</a></p>
              </li>
              <li>On corresponding action class, we added a <a
                href="http://bristleback.googlecode.com/svn/trunk/doc/bristleServer-0.1.0-javadoc/pl/bristleback/server/bristle/binding/ObjectBinder.html">ObjectBinder</a>
                field
                marked with <a
                  href="http://bristleback.googlecode.com/svn/trunk/doc/bristleServer-0.1.0-javadoc/pl/bristleback/server/bristle/binding/Bind.html">@Bind</a>
                annotation. This is the place where the
                binding
                operation is specified.
                <p><a href="http://code.google.com/p/bristleback/wiki/Binding">More about binding - server side</a></p>
              </li>
              <li>
                Action class sends a response to user. Depending on the response type, <code>onSuccess()</code> or
                <code>onFailure()</code>
                methods of previously created callback object are invoked.
                <p><a href="http://code.google.com/p/bristleback/wiki/JavaScriptClientTutorial">More about Java Script
                  remote functions and callbacks</a></p>
              </li>
            </ol>
          </li>
          <li class="descriptionDivTableOfContentElement">
            <span>Sources</span>

            <p><a href="http://code.google.com/p/bristleback/source/browse/#svn%2Ftrunk%2Fexamples%2FBindingSample">svn
              repo</a>
            </p>
          </li>
          <li class="descriptionDivTableOfContentElement">
            <span>Authors</span>

            <p>Bristleback plugin team</p></li>
          <li class="descriptionDivTableOfContentElement">
            <span>Website</span>

            <p><a href="http://bristleback.googlecode.com">bristleback.googlecode.com</a></p>
          </li>
        </ol>
      </div>

      <div id="registrationSuccessDiv" class="registrationSuccessDiv">
        <h4 style="font-family:verdana, sans-serif;">Registration successful!</h4>

        <div id="registrationSuccessContentDiv" style="font-size:10pt">

        </div>
      </div>

      <div id="connectingDiv" class="connectingDiv">
        <h4 style="font-family:verdana, sans-serif;">Connecting...</h4>
      </div>

      <div id="disconnectedDiv" class="disconnectedDiv">
        <h4 style="font-family:verdana, sans-serif;">Disconnected from the server</h4>

        <h4 style="font-family:verdana, sans-serif;">Press F5 to connect again.</h4>
      </div>
    </form>
    <div style="clear: both;"></div>
  </div>
</div>
</body>
</html>
